Ext.define('Order', {
	extend : 'Ext.data.Model',

	fields : [ {
		name : 'date',
		type : 'date',
		dateFormat : 'Y-m-d'
	}, 'shipped', {
		name : 'customerId',
		reference : {
			parent : 'Customer'
		}
	} ]
/*
 * ,
 * 
 * proxy : { type : 'rest', url : '/KitchenSink/Order' }
 */
});
Ext.define('Customer', {
	extend : 'Ext.data.Model',
	fields : [ 'name', {
		name : 'phone',
		type : 'string'
	} ]
	/*
	 * proxy : { type : 'rest', url : '/KitchenSink/Customer' },
	 */
	/*validators : {
		name : 'presence'
	}*/
});
Ext.onReady(function() {

	Ext.define('CustomerGrid', {
		extend : 'Ext.grid.Panel',
		alias : 'widget.customer-grid',

		requires : [ 'Ext.ux.grid.SubTable', 'Order',
				'Customer' ],
		title : 'Customers',
		width : 700,
		height : 400,
		autoShow : true,
		renderTo : Ext.getBody(),
		constructor : function(config) {
			config = Ext.apply({
				plugins : {
					ptype : "subtable",
					association : 'orders',
					headerWidth : 32,
					columns : [ {
						text : 'Order Id',
						dataIndex : 'id',
						width : 100
					}, {
						xtype : 'datecolumn',
						format : 'Y-m-d',
						width : 120,
						text : 'Date',
						dataIndex : 'date'
					} ]
				}
			}, config);
			this.callParent([ config ]);
		},

		initComponent : function() {
			Ext.apply(this, {
				store : {
					autoLoad : true,
					proxy : {
						type : 'memory',
						data : [ {
							"id" : 1,
							"name" : "Bread Barn",
							"phone" : "8436-365-256",
							"orders" : [ {
								"id" : 1,
								"date" : "2010-08-13",
								"customerId" : 1
							}, {
								"id" : 2,
								"date" : "2010-07-14",
								"customerId" : 1
							} ]
						}, {
							"id" : 2,
							"name" : "Icecream Island",
							"phone" : "8452-389-719",
							"orders" : [ {
								"id" : 3,
								"date" : "2010-01-22",
								"customerId" : 2
							}, {
								"id" : 4,
								"date" : "2010-11-06",
								"customerId" : 2
							} ]
						}, {
							"id" : 3,
							"name" : "Pizza Palace",
							"phone" : "9378-255-743",
							"orders" : [ {
								"id" : 5,
								"date" : "2010-12-29",
								"customerId" : 3
							}, {
								"id" : 6,
								"date" : "2010-03-03",
								"customerId" : 3
							} ]
						} ]
					},
					model : 'Customer'
				},
				columns : [ {
					text : 'Id',
					dataIndex : 'id'
				}, {
					text : 'Name',
					dataIndex : 'name',
					flex : 1,
					hideable : false
				}, {
					width : 140,
					text : 'Phone',
					dataIndex : 'phone'
				} ]
			});
			this.callParent();
		}
	});
});